<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :key="'first'" label="班级对比" name="first">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="firstGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="年份:">
            <el-select v-model="firstYear" placeholder="请选择">
              <el-option
                v-for="item in firstOption.years"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="firstSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="firstData"
          style="width: 90%; margin: 0 auto; padding-top: 20px; padding-bottom: 80px"
          :stripe="true"
        >
          <el-table-column prop="class" label="班级" />
          <el-table-column prop="date" label="收取日期" />
          <el-table-column prop="unitMoney" label="单价" />
          <el-table-column prop="number" label="缴费人数" />
          <el-table-column prop="sum" label="总价" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane :key="'second'" label="历年数据" name="second">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="secondGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="secondClass" placeholder="请选择">
              <el-option
                v-for="item in secondOption.classes"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="secondSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="secondData"
          style="width: 90%; margin: 0 auto; padding-top: 20px; padding-bottom: 80px"
          :stripe="true"
        >
          <el-table-column prop="year" label="年份" />
          <el-table-column prop="date" label="收取日期" />
          <el-table-column prop="unitMoney" label="单价" />
          <el-table-column prop="number" label="缴费人数" />
          <el-table-column prop="sum" label="总价" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { getGradeClassesYears } from '@/api/gradeClassesYears'
import { getGradeDues, getHistoryDues } from '@/api/part1/dues'

export default {
  components: {},
  props: [],
  data() {
    return {
      activeName: 'first',
      options: [],
      firstGrade: 2017,
      firstClass: '软件工程1班',
      firstYear: 2020,
      firstOption: {},
      firstData: [],
      secondGrade: 2017,
      secondOption: {},
      secondClass: '软件工程1班',
      secondData: []
    }
  },
  computed: {},
  watch: {
    secondGrade: function(val) {
      this.secondOption = this.options.find(function(x) { return x.grade === val })
      this.secondClass = this.secondOption.classes[0]
    },
    firstGrade: function(val) {
      this.firstOption = this.options.find(function(x) { return x.grade === val })
      this.firstYear = this.firstOption.years[0]
    }
  },
  beforeCreate() { },
  created() {
    // 获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options
      this.firstGrade = this.options[0].grade
      this.secondGrade = this.options[0].grade
      this.firstSearch()
      this.secondSearch()
    }).catch(response => {
      console.log(response)
    })
  },
  beforeMount() { },
  mounted() {

  },

  beforeUpdate() { },
  updated() { },
  destoried() { },
  methods: {
    // 在此自动生成
    request() {
      // 网络请求，可选
    },
    firstSearch() {
      const data = {
        grade: this.firstGrade,
        year: this.firstYear
      }
      getGradeDues(data).then(response => {
        this.firstData = []
        const temp = response.data.data
        for (let i = 0; i < temp.length; i++) {
          let price = parseFloat(temp[i].unitMoney) * parseInt(temp[i].number)
          if (!price) price = '尚未填写,暂无信息'
          const tempitem = {
            class: temp[i].class,
            date: temp[i].date,
            unitMoney: temp[i].unitMoney,
            number: temp[i].number,
            sum: price
          }
          this.firstData.push(tempitem)
        }
        console.log(this.firstData)
      }).catch(err => {
        console.log(err)
      })
    },
    secondSearch() { // 查询一个班级对应各年份的数据
      const user = this.secondGrade + '级' + this.secondClass + '团支部'
      const data = { user: user }
      getHistoryDues(data).then(response => {
        this.secondData = []
        const temp = response.data.data
        for (let i = 0; i < temp.length; i++) {
          const price = parseFloat(temp[i].unitMoney) * parseInt(temp[i].number)
          const tempitem = {
            year: temp[i].year,
            date: temp[i].date,
            unitMoney: temp[i].unitMoney,
            number: temp[i].number,
            sum: price
          }
          this.secondData.push(tempitem)
        }
        console.log(this.secondData)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  fillter: {}
}

</script>

<style scoped>
/*  在此自动生成 */
</style>
